<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
	<!-- 全部投诉 -->
	<div class="layout-padding">
		<basic-container class="layout-padding-auto layout-padding-view">
			<avue-crud
				ref="crud"
				v-model:page="page"
				:data="tableData"
				:permission="permissionList"
				:table-loading="tableLoading"
				:option="tableOption"
				@on-load="getList"
				@search-change="searchChange"
				@refresh-change="refreshChange"
				@size-change="sizeChange"
				@current-change="currentChange"
				@row-update="handleUpdate"
				@row-save="handleSave"
				@row-del="rowDel"
				@selection-change="selectionChange"
			>
				<template #menu-left>
					<el-button class="filter-item" plain type="primary" icon="el-icon-download" @click="exportExcel">导出 </el-button>
					<el-button class="filter-item" plain type="primary" icon="el-icon-delete" @click="plDelete"> 批量删除 </el-button>
				</template>
				<template #complainState="{ row }">
					<el-tag v-if="row.complainState == '0'">待指派</el-tag>
					<el-tag type="warning" v-if="row.complainState == '1'">待处理</el-tag>
					<el-tag type="success" v-if="row.complainState == '2'">已处理</el-tag>
					<el-tag type="success" v-if="row.complainState == '3'">已确认</el-tag>
					<el-tag type="success" v-if="row.complainState == '4'">已反馈</el-tag>
				</template>
				<template #menu="scope">
					<el-dropdown>
						<span class="el-dropdown-link" style="margin-left: 5px;">
							操作
							<el-icon class="el-icon--right" style="margin-left: -2px;">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item
									:disabled="
										scope.row.complainState === '1' ||
										scope.row.complainState === '2' ||
										scope.row.complainState === '3' ||
										scope.row.complainState === '4'
									"
									@click="appoint(scope.row)"
									>指派
								</el-dropdown-item>
								<el-dropdown-item
									:disabled="
										scope.row.complainState === '0' ||
										scope.row.complainState === '2' ||
										scope.row.complainState === '3' ||
										scope.row.complainState === '4' ||
										scope.row.handleUserId !== userId
									"
									@click="handleComplain(scope.row)"
									>处理
								</el-dropdown-item>
								<el-dropdown-item @click="confirmComplain(scope.row)">确认</el-dropdown-item>
								<el-dropdown-item @click="feedComplain(scope.row)">反馈</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</avue-crud>
		</basic-container>
		<el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="指派投诉" width="28%" @close="dialogFormVisible = false">
			<el-form-item label="处理部门" required>
				<avue-input-tree
					v-model="handleDept"
					:dic="handleDeptData"
					:props="defaultProps1"
					filterable
					placeholder="请选择处理部门"
					type="tree"
					style="width: 380px"
				>
				</avue-input-tree>
			</el-form-item>
			<el-form-item label="处理人员" required>
				<avue-select v-model="handleUser" :dic="handleUserData" :props="defaultProps2" filterable placeholder="请选择处理人员" style="width: 380px">
				</avue-select>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="confirmCom"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-if="dialogFormVisible1" v-model="dialogFormVisible1" title="确认投诉" width="38%" @close="dialogFormVisible1 = false">
			<el-form-item label="确认建议">
				<el-input type="textarea" v-model="confirmSug"></el-input>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeHandleConfirm">取消</el-button>
					<el-button type="primary" @click="handleConfirm"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-if="dialogFormVisible2" v-model="dialogFormVisible2" title="反馈投诉" width="38%" @close="dialogFormVisible2 = false">
			<el-form-item label="反馈内容">
				<el-input type="textarea" v-model="feedSug"></el-input>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeConfirmfeed">取消</el-button>
					<el-button type="primary" @click="Confirmfeed"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { fetchListHandle, getObj, addObj, putObj, delObj, operateComplain, delAllObj } from '/@/api/om/omwordercomplain';
import { getDeptTree, getQueryUser, getUserById, getOrderCount } from '/@/api/om/omworder';
import { tableOption } from '/@/const/crud/om/omwordercomplainHandle.js';
//   import {mapGetters} from 'vuex'

export default {
	name: 'omwordercomplain',
	data() {
		return {
			searchForm: {},
			tableData: [],
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			tableLoading: false,
			tableOption: tableOption,
			dialogFormVisible: false,
			dialogFormVisible1: false,
			dialogFormVisible2: false,
			handleDept: '',
			handleDeptData: [],
			selectList: [],
			handleUser: '',
			handleUserData: [],
			cpId: '',
			confirmSug: '',
			feedSug: '',
			defaultProps1: {
				label: 'name',
				value: 'id',
			},
			defaultProps2: {
				label: 'name',
				value: 'userId',
			},
		};
	},
	computed: {
		//   ...mapGetters(['permissions', 'userInfo']),
		permissionList() {
			return {
				//   addBtn: this.validData(this.permissions.om_omwordercomplain_add, false),
				//   delBtn: this.validData(this.permissions.om_omwordercomplain_del, false),
				//   editBtn: this.validData(this.permissions.om_omwordercomplain_edit, false)
			};
		},
		userId() {
			// return JSON.parse(sessionStorage.getItem('pig-userInfo')).content.userId
		},
	},
	watch: {
		handleDept(val, oldVal) {
			if (val && val !== oldVal) {
				// getQueryUser
				getQueryUser({deptId: val}).then((res) => {
					this.handleUserData = res.data.records;
					this.handleUser = '';
				});
			}
		},
	},
	methods: {
		selectionChange(list) {
			this.selectList = list;
		},
		getList(page, params) {
			this.tableLoading = true;
			fetchListHandle(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
						// orderUserId: this.userInfo.userId
					},
					params,
					this.searchForm
				)
			)
				.then((response) => {
					this.tableData = response.data.records;
					this.page.total = response.data.total;
					this.tableLoading = false;
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除编号为' + row.orderNo, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delObj(row.cpId);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((cancelorerror) => {});
		},
		handleUpdate: function (row, index, done, loading) {
			putObj(row)
				.then((data) => {
					this.$message.success('修改成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		handleSave: function (row, done, loading) {
			addObj(row)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		currentChange(current) {
			this.page.currentPage = current;
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		refreshChange() {
			this.getList(this.page);
		},
		appoint(row) {
			this.dialogFormVisible = true;
			this.cpId = row.cpId;
			getDeptTree().then((res) => {
				this.handleDeptData = res.data;
			});
		},
		// 指派工单
		confirmCom() {
			let obj = {
				cpId: this.cpId,
				complainState: 1 + '',
				handleUserId: this.handleUser,
				handleUserDeptId: this.handleDept,
			};
			if (obj.handleUserId && obj.handleUserDeptId) {
				operateComplain(obj)
					.then((res) => {
						this.$message.success('投诉指派成功');
						this.dialogFormVisible = false;
						this.getList(this.page);
						this.getCount();
					})
					.catch((err) => this.$message.error(err));
			} else {
				this.$message.warning('请选择处理部门和处理人员');
			}
		},
		handleComplain(row) {
			this.$confirm('是否确认处理投诉', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				operateComplain({
					cpId: row.cpId,
					complainState: 2 + '',
				}).then((res) => {
					this.$message.success('处理投诉成功');
					this.getList(this.page);
				});
			});
		},
		confirmComplain(row) {
			this.dialogFormVisible1 = true;
			this.cpId = row.cpId;
		},
		closeHandleConfirm() {
			this.dialogFormVisible1 = false;
			this.confirmSug = '';
		},
		handleConfirm() {
			let obj = {
				cpId: this.cpId,
				complainState: 3 + '',
				confirmDesc: this.confirmSug,
			};
			operateComplain(obj).then((res) => {
				this.$message.success('投诉确认成功');
				this.dialogFormVisible1 = false;
				this.getList(this.page);
				this.confirmSug = '';
			});
		},
		closeConfirmfeed() {
			this.dialogFormVisible2 = false;
			this.feedSug = '';
		},
		feedComplain(row) {
			this.dialogFormVisible2 = true;
			this.cpId = row.cpId;
		},
		Confirmfeed() {
			let obj = {
				cpId: this.cpId,
				complainState: 4 + '',
				confirmDesc: this.feedSug,
			};
			operateComplain(obj).then((res) => {
				this.$message.success('反馈处理成功');
				this.dialogFormVisible2 = false;
				this.getList(this.page);
				this.feedSug = '';
			});
		},
		//批量删除
		plDelete() {
			if (this.selectList.length > 0) {
				this.$confirm('是否确认删除以选择的数据', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						let ids = [];
						this.selectList.forEach((data) => {
							ids.push(data.cpId);
						});
						return delAllObj(ids);
					})
					.then((data) => {
						this.$message.success('删除成功');
						this.getList(this.page);
					})
					.catch((cancelorerror) => {});
			}
		},
		exportExcel() {
			this.downBlobFile('/om/omwordercomplain/export', this.searchForm, '投诉.xlsx');
		},
		getCount() {
			getOrderCount({ handleUserId: this.userInfo.userId }).then((res) => {
				let list = res.data.data;
				this.$store.commit('setOrderCount', list.orderCount);
				this.$store.commit('setComplainCount', list.complainCount);
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.theme-white .el-dropdown {
	margin-top: 7px;
}
::v-deep .avue-crud__menu {
	display: flex;
	align-items: center;
}
</style>
